<template>
	<span-item v-for="item in spanItemList"
						:key="item"
						:class="'bg-'+item.bg"
						:spanTitle="item.title"
						:spanImage="item.image"
            :routerPath="item.routerPath" />
</template>
<script>
import SpanItem from '@/components/SpanItem.vue'
export default {
	components: { SpanItem },
	name: 'QuMiao',
	data () {
		return {
			spanItemList: [
				{ title: "种类取苗", image: require("../assets/种类取苗.png"), bg: "jzcm",routerPath:"/Qumiao/ZhongleiQumiao" },
				{ title: "最近取苗", image: require("../assets/最近取苗.png"), bg: "zjqm",routerPath:"/Qumiao/ZuijinQumiao" },
				{ title: "常用取苗", image: require("../assets/常用取苗.png"), bg: "cyqm",routerPath:"/Qumiao/ChangyongQumiao" },
				{ title: "取苗日志", image: require("../assets/取苗日志.png"), bg: "qmrz",routerPath:"/Qumiao/QumiaoRizhi" }
			]
		}
	}
}
</script>
<style scoped>
.bg-jzcm {
	background: linear-gradient(
		0deg,
		rgb(94, 24, 163) 0%,
		rgb(38, 114, 255) 100%,
		rgb(201, 125, 255) 100%
	);
}
.bg-zjqm {
	background: linear-gradient(
		0deg,
		rgb(61, 80, 204) 0%,
		rgb(50, 157, 219) 53.47%,
		rgb(38, 255, 241) 100%
	);
}
.bg-cyqm {
	background: linear-gradient(
		0deg,
		rgb(33, 129, 148) 0%,
		rgb(126, 191, 34) 53.47%,
		rgb(255, 229, 33) 100%
	);
}
.bg-qmrz {
	background: linear-gradient(
		rgb(44, 216, 213) 0%,
		rgb(107, 141, 214) 48%,
		rgb(142, 55, 215) 100%
	);
}
</style>